<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*  #first{

        }
        .demo{

        }

        div{}

        .wrap > div{

        } */
    </style>
</head>

<body>
    <!-- <div id="first" class="demo">01</div>
    <div class="demo">02</div>
    <div class="demo">03</div>
    <div class="demo">04</div>
    <div class="demo">05</div>
    <div class="demo">06</div>
    <div class="demo">07</div>
    <div class="demo">08</div>
    <div class="demo">09</div>
    <div class="demo">10</div>

    <form action="">
        <p>
            <label>用户名: <input type="text" name="user"> </label>
        </p>
        <p>
            <label>密码: <input type="text" name="pwd"> </label>
        </p>
        <p> 
            <span>爱好:</span>
            <label><input type="checkbox" name="hobby" value="sing">唱</label>
            <label><input type="checkbox" name="hobby" value="dance">跳</label>
            <label><input type="checkbox" name="hobby" value="rap">rap</label>
            <label><input type="checkbox" name="hobby" value="basketball">篮球</label>
        </p>
    </form> -->

    <div class="wrap">
        <div id="first" class="demo">01</div>
        <div class="demo">02</div>
        <div class="demo" third>03</div>
        <div class="demo">04</div>
        <div class="demo">05</div>
        <div class="demo">06</div>
        <div class="demo">07</div>
        <div class="demo">08</div>
        <div class="demo">09</div>
        <div class="demo">10</div>
    </div>
    <div class="sub">
        <div id="second" class="demo">01</div>
        <div class="demo">02</div>
        <div class="demo">03</div>
        <div class="demo">04</div>
        <div class="demo">05</div>
        <div class="demo">06</div>
        <div class="demo">07</div>
        <div class="demo">08</div>
        <div class="demo">09</div>
        <div class="demo">10</div>
    </div>
</body>
<script>
    // 元素节点的获取  (增删改查 => 查)

    // 如何获取元素节点?
    // (1) 通过文档(document)获取   => 查找范围(页面中所有)
    // document.getElementById()   对应id名获取元素,存在就返回元素,否则就返回null
    // document.getElementsByClassName()  对应class名获取元素,存在就返回元素的集合,否则就返回[]
    // document.getElementsByTagName()    对应标签名获取元素,存在就返回元素的集合,否则就返回[]
    // document.getElementsByName();      对应name属性获取元素,存在就返回元素的集合,否则就返回[]  => 常用于表单元素

    // var first = document.getElementById("first");
    // console.log(first);

    // var demoList = document.getElementsByClassName("demo");
    // console.log(demoList);

    // var divList = document.getElementsByTagName("div");
    // console.log(divList);

    // var userInp = document.getElementsByName("user");
    // console.log(userInp);

    // var hobbyList = document.getElementsByName("hobby");
    // console.log(hobbyList);

    // (2)  通过父元素查找子(代)元素  => 限定查询范围
    // 语法
    // 父元素.getElementsByClassName();
    // 父元素.getElementsByTagName();

    // 注意: 只能通过父元素对应class名,和标签名查找子(代)元素, (id名和name属性获取只能通过文档)

    // var wrap = document.getElementsByClassName("wrap")[0];

    // var demoList = wrap.getElementsByClassName("demo");
    // console.log(demoList);

    // var divList = wrap.getElementsByTagName("div");
    // console.log(divList);

    // var first = wrap.getElementById("first");
    // console.log(first);

    // (3)  根据css选择器查找元素  (css2 css3) 
    // document.querySelector(selector)   单元素查找  =>  根据css选择器查找元素,返回被查找的元素,存在就返回元素,不存在返回null
    //                                    如果查找的元素有多个,默认返回第一个

    // document.querySelectorAll(selector)  多元素查找 =>  根据css选择器查找元素,返回被查找的元素的集合,存在就返回元素的集合,不存在返回[]
    //                                     即便查找的元素只有一个,也会放到集合中

    // 此方法也可以通过父元素查找 (了解)
    // 父元素.querySelector(selector) 
    // 父元素.querySelectorAll(selector) 


    // var first = document.querySelector("#first");
    // console.log(first);
    // var last = document.querySelector("#last");
    // console.log(last);

    // var first = document.querySelector(".wrap #first");
    // console.log(first);

    // var first = document.querySelector(".wrap .demo");
    // console.log(first);

    // 常见用法
    // var adver = document.getElementsByClassName("adver")[0];  // 以前
    // var adver = document.querySelector(".adver");  //现在


    // 多元素查找
    // var demoList = document.querySelectorAll(".wrap .demo");
    // console.log(demoList);

    // var demoList = document.querySelectorAll(".wrap > div");
    // console.log(demoList);

    // // 即便查找的元素只有一个,也会放到集合中
    // var firstList = document.querySelectorAll("#first");
    // console.log(firstList);

    // var lastList = document.querySelectorAll("#last");
    // console.log(lastList);


    // 也可以使用css3的选择器
    var second = document.querySelector(".wrap > div:nth-child(2)");
    console.log(second);

    var third = document.querySelector(".wrap > [third]");
    console.log(third);
    third.style.backgroundColor = "red";
    third.innerText = "33333333333";
    console.log(typeof third);






</script>

</html>